<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Game of Throne Interactive Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
    <script src="./assets/pace.min.js"></script>
    <style>
        body, html {
            margin:0;
            padding:0;
            background-color: #333;
            height: 100%;
        }
        #app-title {
            font-family: "Spectral";
            font-weight: 900;
            font-size: 15px;
            text-align: center;
            color: #999;
        }
        .map-cont {
            flex: 1;
            position: relative;
            height: 100%;
        }
        #map {
            height: 100%;
        }
        #map span {
            text-align: center;
            font-family: "Quintessential";
            font-weight: 900;
            font-style: italic;
            color: #ccc;
        }
        #height {
            display: none;
        }
        .toggleBtn {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 12px;
            color: #eee;
            display: flex;
            align-items: center;
        }
        .map-overlay-container {
            position: absolute;
            width: 200px;
            top: 30px;
            left: 0;
            padding: 10px;
            z-index: 1;
        }
 
        .map-overlay {
            font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            background-color: #fff;
            border-radius: 3px;
            padding: 10px;
            box-shadow:0 1px 2px rgba(0,0,0,0.20);
        }
 
        .map-overlay h2,
        .map-overlay p {
            margin: 0 0 10px;
            color: #333;
        }
        .map-overlay h2 {
            color: #999;
            font-family: "Spectral";
            /* font-style: italic; */
        }
        .btn-container {
            display: flex;
        }
        .m-flex {
            flex: 2;
        }
        .btn {
            flex: 1;
            color: #999
        }
        .btn:hover {
            cursor: pointer;
            color: #666;
        }
        .audio-cont {
            /* width: 200px; */
            height: 18px;
        }
        #muteBtn {
            cursor: pointer;
        }
        .icon-muted {
            fill: rgb(63, 81, 181);
        }
    </style>
</head>
<body>
<!-- <h4 class="app-title">Game of Throne Interactive Map</h4> -->
<div class="map-cont">
    <canvas id="height"></canvas>
    <div id='map'></div>
    <div class="toggleBtn">
        <input type="checkbox" name="toggleTerrain" id="toggleTerrain" 
            onchange="toggleTerrain()" checked disabled>
        <label for="toggleTerrain">toggle terrain</label>
        <iframe src="assets/silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
        <audio id="player" autoplay loop muted
            src="https://music.163.com/song/media/outer/url?id=32526653.mp3"></audio>
    </div>
    <div class='map-overlay-container'>
        <div class='map-overlay'>
            <div>
                <span id='app-title'>Game of Throne Interactive Map</span>
                <svg id="muteBtn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1558261737436" class="icon" style="fill:rgb(63, 81, 181);" viewBox="0 0 1024 1024" version="1.1" p-id="2339" width="16" height="16"><defs><style type="text/css"/></defs><path d="M846.208 512 979.744 378.464C994.144 364.064 995.488 342.016 982.752 329.248 969.984 316.512 947.936 317.856 933.536 332.256L800 465.792 666.464 332.256C652.064 317.856 630.016 316.512 617.248 329.248 604.512 342.016 605.856 364.064 620.256 378.464L753.792 512 620.256 645.536C605.856 659.936 604.512 681.984 617.248 694.752 630.016 707.488 652.064 706.144 666.464 691.744L800 558.208 933.536 691.744C947.936 706.144 969.984 707.488 982.752 694.752 995.488 681.984 994.144 659.936 979.744 645.536L846.208 512 846.208 512ZM480 128 256 277.344 256 746.656 480 896C515.328 896 544 867.328 544 832L544 192C544 156.672 515.328 128 480 128L480 128ZM32 384 32 640C32 675.328 60.672 704 96 704L192 704 192 320 96 320C60.672 320 32 348.672 32 384L32 384Z" p-id="2340"/></svg>
            </div>
            <p id='location-description'>loading data...</p>
            <div class="btn-container">
                <span class="btn" id="preChapBtn"> < Pre </span>
                <span class="btn" id="pauseBtn">Pause</span>
                <span class="btn" id="nextChapBtn"> Next > </span>
            </div>
            
            <small>Text credit: <a target='_blank' href='https://asoiaf.fandom.com/zh/wiki/Portal:%E5%8E%86%E5%8F%B2'>https://asoiaf.fandom.com/zh/wiki</a></small>
        </div>
    </div>
    
</div>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<script src="./src/bundle.js"></script>
<script src='https://unpkg.com/three@0.102.0/build/three.min.js'></script>
<script src="https://unpkg.com/three@0.102.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="./src/textureloader.js"></script>
<script src="./assets/timelines.js"></script>
<script src="./src/player.js"></script>
<script src="./src/index.js"></script>
</body>
</html>
